<template>
	<div class="p p1" ref="p1">
		<img :class="['img',{'jumpup':index==1}]" src="../../static/images/img1.jpg" alt="">
		<div :class="['context',{'jumpdown':index==1}]">
			<p>前端开发工程师</p>
			<div class="s">
				<span><img src="../../static/images/wechat.svg" alt=""></span>
				<span><img src="../../static/images/mobile-phone.svg" alt=""></span>
				<span><img src="../../static/images/email.svg" alt=""></span>
				<span><img src="../../static/images/prompt.svg" alt=""></span>
			</div>
			<div class="container">
				<div class="loading"></div>
			</div>
			<p :class="[{'load':index==1}]">鄙人，华生<span class="flash"></span></p>
		</div>
	</div>
</template>

<script>
	export default {
		mounted() {
			// console.log(this.index);
		},
		data() {
			return {

			}
		},
		props: ["index"],
		methods: {

		}
	}
</script>

<style>
	@keyframes jumpup {
		50% {
			transform: translateY(-20px);
		}

		100% {
			transform: translateY(0px);
		}
	}

	@keyframes jumpdown {
		50% {
			transform: translateY(20px);
		}

		100% {
			transform: translateY(0px);
		}
	}

	.jumpup {
		animation: jumpup 2s linear infinite forwards;
	}

	.jumpdown {
		animation: jumpdown 2s linear forwards;
	}

	.p1 {
		background-color: #333333;
		position: relative;
	}

	.p1>.img {
		width: 250px;
		height: 250px;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -125px;
		margin-top: -180px;
	}

	@keyframes rotateImg {
		0% {
			transform: rotateZ(0deg);
		}

		25% {
			transform: rotateZ(-15deg);
		}

		50% {
			transform: rotateZ(15deg);
		}

		70% {
			transform: rotateZ(-15deg);
		}

		100% {
			transform: rotateZ(15deg);
		}
	}

	.p1>.img:hover {
		animation: rotateImg 1.5s linear;
	}

	.context {
		width: 500px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -250px;
		margin-top: 100px;
		text-align: center;
	}

	.context>p {
		color: white;
		font-size: 24px;
		margin-left: 22px;
		letter-spacing: 0.125rem;
	}

	.s {
		margin-top: 20px;
		margin-bottom: 15px;
		padding-bottom: 10px;
		/* border-bottom: 1px white solid; */
	}

	.s>span>img {
		width: 20px;
		height: 20px;
		margin-left: 25px;
	}

	.container {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 400px;
		height: 8px;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
		border-radius: 10px;
	}

	.container .loading {
		position: absolute;
		width: 50px;
		height: 8px;
		border-radius: 10px;
		animation: move 3s linear infinite;
		background: linear-gradient(45deg, #fca311 25%, transparent 25%, transparent 50%, #fca311 50%, #fca311 75%, transparent 75%, transparent);
	}
	@keyframes move{
		0%{
			left: 0;
			width: 50px;
		}
		50%{
			left: 0;
			width: 400px;
		}
		100%{
			left: 350px;
			width: 50px;
		}
	}


	@keyframes flash {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes print {
		from {
			width: 0;
		}

		to {
			width: 150px;
		}
	}

	.context>.load {
		margin-top: 50px;
		position: relative;
		left: 170px;
		overflow: hidden;
		white-space: nowrap;
		animation: print 2s forwards steps(6);
	}

	.context>.load>.flash {
		display: inline-block;
		width: 2px;
		height: 25px;
		margin-bottom: -5px;
		background-color: coral;
		animation: flash 1s linear infinite;
	}
</style>
